<template>
	<view>
		<image src="https://www.shuyunpt.com/app/image/order/bg4.png" class="w-750 h-500 scrollView"></image>
		<!-- app -->
		<view class="position-fixed left-0 right-0 title-box  c-white">
			<view class="p-t-60 d-flex-items-center d-flex-between">
				<view class="w-100 p-l-30" @click="$jump.navigateBack()">
					<u-icon name="arrow-left" color="#ffffff" size="42"></u-icon>
				</view>
				<view class="f-36">分项进度表</view>
				<view class="w-100"></view>
			</view>
		</view>
		<view class="position-fixed left-0 right-0  bgc-box">

			<scroll-view scroll-y="true" :style="{height:scrollHeight+'px'}">
				<view class="w-670 base-view br-28 m-l-40 m-t-20 m-r-40 p-l-32 p-b-24">
					<view class="d-flex-items-center d-flex-between p-t-32 p-b-24">
						<view class="d-flex-items-center">
							<image src="https://www.shuyunpt.com/app/image/order/address.png" class="w-30 h-30 m-r-10">
							</image>
							<view class="f-28 ">{{order_base.province}}</view>
						</view>
						<image @click="contactService" src="https://www.shuyunpt.com/app/image/order/kefu.png"
							class="w-50 h-50 m-r-30"></image>
					</view>
					<view class="address-view m-t-10">
						<view class="p-b-16 f-32 m-l-40 p-t-10">
							<text class="c-white font-weight-bold address-text">{{order_base.address}}</text>
						</view>
						<view class="p-b-16 f-32 m-l-40  c-white">
							<text  class="c-white address-text">{{order_base.contact_name}}  {{order_base.contact_phone}} </text>
						</view>
					</view>
					
				</view>
				<view class="w-670 h-140 m-l-40 m-r-40 m-t-50 position-retive">
					<image src="https://www.shuyunpt.com/app/image/order/bg3.png" class="w-670 h-140"></image>
					<view class="position-absolute left-0 right-0 top-0 d-flex-items-center h-140">
						<view class="p-l-30 p-r-30">
							<view>项目名称：</view>
							<view class="m-t-8 font-weight-bold c-33">{{order_base.service_name}}</view>
						</view>
					</view>
				</view>
				<view class="w-670 bgc-white m-l-40 m-r-40 m-t-30">
					<view class="w-610 m-l-30 m-r-30 br-30">
						<view class="b-b h-130 d-flex-items-center d-flex-between" v-for="(item,index) in item_list"
							:key="index">
							<view>{{item.item_name}}</view>
							<view class="d-flex-items-center">
								<view class="c-77 m-r-50" @click="see(item)">
									<u-icon name="eye" color="#999999" size="28" class="m-r-10"></u-icon>
									查看
								</view>
								<view class="item-1">{{item.status_text}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="w-670 bgc-white br-28 m-l-40 m-r-40 p-l-32 p-b-24 m-t-20">
					<view class="d-flex-items-center p-t-32 p-b-24">
						<image src="https://www.shuyunpt.com/app/image/order/info.png" class="w-30 h-30 m-r-15"></image>
						<view class="f-32 font-weight-bold">订单信息</view>
					</view>
					
					<view class="p-b-16">
						<text class="c-33 font-weight-bold">订单编号：</text>
						<text>{{order_base.order_no}}</text>
					</view>
					<view class="p-b-16">
						<text class="c-33 font-weight-bold">下单时间：</text>
						<text>{{order_base.order_time}}</text>
					</view>
					<view  v-if="order_base.show_contract == 1" class="d-flex-items-center d-flex-between p-t-32 p-b-24 contract-view" @click="viewContract">
						<view class="d-flex-items-center">
							<image src="https://www.shuyunpt.com/app/image/order/info.png" class="w-30 h-30 m-r-15"></image>
							<view class="f-32 font-weight-bold">合同附件</view>
						</view>
						<image src="https://www.shuyunpt.com/app/image/order/right.png" class="w-30 h-30"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view class="p-25">
				<view class="font-weight-bold p-b-15">查看信息</view>
				<u-field v-model="craftsman_name" label="匠人姓名" disabled>
				</u-field>
				<u-field v-model="craftsman_mobile" label="联系电话" disabled>
				</u-field>
				<view class="m-t-60 m-b-60">
					<button type="primary" @click="craClick">联系他</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollHeight: 0,
				info: {},
				item_list: [],
				order_base: {},
				show: false,
				craftsman_name: "",
				craftsman_mobile: "",
				task_id: null,
				orderNo: ""
			}
		},
		onReady() {
			let _this = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let wHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".scrollView"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						_this.scrollHeight = wHeight - 120
					}).exec()
				}
			})
		},
		onLoad(params) {
			this.orderNo = params.order
			this.getInfo(params.order)
		},
		methods: {
			see(item) {
				if (item.craftsman_id == "" || !item.craftsman_id) {
					return this.$hint.desc('请等待匠人接单')
				}
				console.log(item);
				this.craftsman_name = item.craftsman_name
				this.craftsman_mobile = item.craftsman_mobile
				this.show = true
				this.task_id = item.task_id
			},
			async craClick() {
				console.log(this.orderNo);
				const res = await this.$service({
					url: "/api/member.message/startChat",
					data: {
						order_no: this.orderNo,
						task_id: this.task_id
					}
				})
				console.log(res);
				uni.navigateTo({
					url: `/pages/notice/message?name=${this.craftsman_name}&message_id=${res.data.message_id}`
				})
			},
			async getInfo(id) {
				const res = await this.$service({
					url: "/api/member.order//getOrderInfo",
					data: {
						order_no: id
					}
				})
				console.log(res);
				this.item_list = res.data.item_list
				this.order_base = res.data.order_base

			},
			async contactService(){
				const res = await this.$service({
					url:"/api/member.message/startServiceChat",
				})
				console.log(res);
				uni.navigateTo({
					url:`/pages/notice/message?name=客服&message_id=${res.data.message_id}`
				})
			},
			// 查看合同
			viewContract() {
				
				// #ifdef MP-WEIXIN
				// 微信小程序环境下跳转到web-view页面
				uni.navigateTo({
					url: `/pages/contract/index?order_no=${this.orderNo}`
				});
				// #endif
				
				// #ifdef APP-PLUS
				// APP环境下跳转到web-view页面
				uni.navigateTo({
					url: `/pages/contract/index?order_no=${this.orderNo}`
				});
				// #endif
			},
		}
	}
</script>


<style>
	page {
		background: #F7F9FA;
	}
</style>
<style scoped>
	.bgc-box {
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		top: 200rpx;
	}

	.c-F85639 {
		color: #F85639;
	}

	.item {
		width: 290rpx;
		height: 56rpx;
		background: #B1D5FF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.item-bgc {
		width: 84rpx;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #FFFFFF;
	}

	.heng {
		width: 320rpx;
		height: 0rpx;
		border: 1rpx solid #777777;
	}

	.bottom {
		box-shadow: 0rpx -8rpx 40rpx 0rpx rgba(167, 180, 196, 0.2);
		border-radius: 60rpx 60rpx 0rpx 0rpx;
	}

	.c-5C65FF {
		color: #5C65FF;
	}

	.title-box {
		top: var(--status-bar-height);
	}

	.item-1 {
		width: 100rpx;
		height: 40rpx;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(167, 180, 196, 0.2);
		border-radius: 80rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #5C64FF;
		line-height: 40rpx;
		text-align: center;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(167, 180, 196, 0.2);
		border-radius: 80rpx 80rpx 80rpx 80rpx;
		border: 2rpx solid rgba(92, 100, 255, 0.7);
	}
	.base-view{
		width: 670rpx;
		background: rgba(255,255,255,0.3);
		box-shadow: inset 4rpx 4rpx 8rpx 0rpx rgba(255,255,255,0.25), 4rpx 4rpx 20rpx 0rpx rgba(167,180,196,0.3);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		color: #fff;
	}
	.address-view{
		width: 606rpx;
		height: 116rpx;
		background: linear-gradient( 270deg, rgba(32,135,254,0.2) 100%, #4654FF 0%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		color: #fff;
	}
	.address-text{
		opacity: 1 !important;
		color: #fff !important;
	}
	.contract-view{
		border-top: 1rpx solid #f0f0f0;
	}
</style>